ESLintでJavaScriptの構文チェックを行う

ESLintでJavaScriptの構文チェックを行う

Clock Icon2017.07.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

LambdaをJavaScriptで記述しているとき(どの言語にも当てはまると思いますが)、構文チェックを行いたいことがあるかと思います。これを行うことで、例えば動作はするけれどセミコロンが無い状態であるなどを気づくことができ、ソースの品質向上に役立ちます。また統一されていないインデントや未使用の変数に気づくこともでき、これらもソースの可読性に影響を与えるかと思います。

今回はJavaScriptでそれを行うツールの一つである「ESLint」を使用してみました。

使用方法

Lambdaのソースを記述するため、node.js、npmはインストール済みであるものとします。チェック対象のソースは以下のようにしました。

main.js
exports.handler = (event, context, callback) => {
  // TODO implement
  console.log("----------main----------");
  callback(null, "Hello Lambda");
};

ESLintのインストール

プロジェクトのローカルに移動し、以下の順でコマンドを実行します。

$ npm install eslint
$ ./node_modules/.bin/eslint -v
$ ./node_modules/.bin/eslint —init

ESLintの設定のウィザードが出るので、任意の値を選択・入力していきます。今回は以下のようにしました。

? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? No
? Where will your code run? Node
? Do you use JSX? No
? What style of indentation do you use? Spaces
? What quotes do you use for strings? Double
? What line endings do you use? Unix
? Do you require semicolons? Yes
? What format do you want your config file to be in? YAML

構文チェック・カスタマイズ

以下のコマンドでESLintを実行し、構文をチェックします。

$ ./node_modules/.bin/eslint main.js

今回の例だと、「console.log」がエラーとなります。要件によってはconsole.logを使用したい場合もあるかと思いますが、構文チェックをカスタマイズしたい場合には「.eslintrc.yml」を修正します。今回はconsole.logを許可するため、以下の行を追加しました。

  no-console: 0

まとめ

ごく簡単に構文チェックを行うことができることが分かりました。積極的に使っていき、ソースの品質向上に役立てたいと思います。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.